HttpClientModule Angular-এর একটি গুরুত্বপূর্ণ মডিউল যা HTTP ক্লায়েন্ট API প্রদান করে, যা সার্ভার থেকে ডেটা প্রাপ্তি এবং পাঠানোর জন্য ব্যবহৃত হয়। এটি Angular HttpClient ক্লাসের মাধ্যমে HTTP অনুরোধ তৈরি, পাঠানো এবং গ্রহণ করা সহজ করে তোলে। HttpClientModule
এর মাধ্যমে আপনি GET, POST, PUT, DELETE এবং অন্যান্য HTTP মেথড ব্যবহার করে সার্ভারের সাথে যোগাযোগ করতে পারেন।
HttpClientModule একটি Angular মডিউল যা HttpClient
সেবা প্রদান করে। এটি অ্যাপ্লিকেশনকে HTTP রিকোয়েস্ট পাঠানোর এবং রেসপন্স পাওয়ার জন্য প্রয়োজনীয় কার্যকলাপ পরিচালনা করতে সাহায্য করে। Angular অ্যাপ্লিকেশনগুলোর মধ্যে ডেটা আদান-প্রদানের জন্য এটি অত্যন্ত প্রয়োজনীয়।
HttpClient
ব্যবহার করে সহজেই GET, POST, PUT, DELETE ইত্যাদি HTTP রিকোয়েস্ট করা যায়।প্রথমে, আপনার অ্যাপ্লিকেশনে HttpClientModule
ইনস্টল ও কনফিগার করতে হবে। এটি করতে, app.module.ts
ফাইলে HttpClientModule
আমদানি করুন।
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // Import HttpClientModule
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule], // Add HttpClientModule to imports
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
এখানে, HttpClientModule
মডিউলটি imports
অ্যারে-তে যোগ করা হয়েছে, যা Angular অ্যাপ্লিকেশনে HTTP অনুরোধ ব্যবহারের জন্য প্রস্তুত।
HttpClient ব্যবহার করে বিভিন্ন ধরনের HTTP রিকোয়েস্ট করা যায়। এটি RxJS Observables ব্যবহার করে রেসপন্স হ্যান্ডলিং এবং অ্যাসিঙ্ক্রোনাস কার্যক্রম পরিচালনা করে।
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
data: any;
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get('https://jsonplaceholder.typicode.com/posts')
.subscribe(response => {
this.data = response;
console.log(this.data);
}, error => {
console.error('Error:', error);
});
}
}
এখানে:
http.get()
মেথডটি GET রিকোয়েস্ট পাঠায়। এটি একটি Observable রিটার্ন করে।.subscribe()
মেথডটি রেসপন্সটি গ্রহণ করে এবং সফল হলে response
ডেটা থেকে প্রাপ্ত তথ্য this.data
এ সংরক্ষণ করা হয়।import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private http: HttpClient) { }
onSubmit() {
const postData = { title: 'Angular POST Example', body: 'This is a test post.' };
this.http.post('https://jsonplaceholder.typicode.com/posts', postData)
.subscribe(response => {
console.log('Post response:', response);
}, error => {
console.error('Error:', error);
});
}
}
এখানে:
http.post()
মেথডটি POST রিকোয়েস্ট পাঠায় এবং postData
ডেটা সার্ভারে পাঠানো হয়।.subscribe()
মেথডটি রেসপন্স বা ত্রুটি হ্যান্ডলিং করে।HTTP রিকোয়েস্ট পাঠানোর সময় ইরর আসতে পারে। Angular-এ HTTP রিকোয়েস্টের ত্রুটি হ্যান্ডলিং করতে RxJS operators যেমন catchError
ব্যবহার করা হয়।
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get('https://jsonplaceholder.typicode.com/invalid-url')
.pipe(
catchError(error => {
console.error('An error occurred:', error);
return throwError(error);
})
)
.subscribe(response => {
console.log(response);
});
}
}
এখানে:
catchError()
ব্যবহার করে HTTP রিকোয়েস্টের ত্রুটি ধরতে এবং কাস্টম ত্রুটি মেসেজ দেখাতে সাহায্য করা হয়।HttpClientModule Angular অ্যাপ্লিকেশনে HTTP রিকোয়েস্ট পরিচালনা করার জন্য একটি গুরুত্বপূর্ণ মডিউল। এটি GET, POST, PUT, DELETE ইত্যাদি HTTP মেথড সাপোর্ট করে এবং ডেটা আদান-প্রদানে সহায়তা করে। HttpClient ব্যবহার করে অ্যাসিঙ্ক্রোনাসভাবে HTTP রিকোয়েস্ট করা যায়, এবং ত্রুটি হ্যান্ডলিং, রেসপন্স প্রসেসিং ইত্যাদি খুব সহজে করা যায়।
Read more